<template>
  <div id="batchList">
    <!-- 上部搜索条件 -->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:longVideoBath:import'"
        type="warning"
        icon="el-icon-upload2"
        @click="importBtn"
      >
        导入
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      id="share-box"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="490"
      ref="table"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" width="50" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column prop="vid" label="视频VID" width="150"></el-table-column>
      <el-table-column prop="title" label="视频创建标题" min-width="180">
        <template slot-scope="{ row }">
          <span
            v-if="
              row.preRelease &&
                row.preRelease.releaseEntry &&
                row.preRelease.releaseEntry.title
            "
            >{{ row.preRelease.releaseEntry.title }}</span
          >
          <span v-else>{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createdDate"
        label="上传时间"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="createdByName"
        label="上传视频人"
        width="130"
      ></el-table-column>
      <el-table-column
        prop="changeDate"
        label="操作时间"
        min-width="120"
      ></el-table-column>
      <el-table-column prop="preRelease" label="作品描述" width="280">
        <template
          v-if="scope.row.preRelease && scope.row.preRelease.releaseEntry"
          slot-scope="scope"
        >
          <el-tooltip class="item" effect="dark" placement="top">
            <div style="max-width: 400px;" slot="content">
              <span v-html="scope.row.preRelease.releaseEntry.content"></span>
            </div>
            <div class="oneLine">
              <span v-html="scope.row.preRelease.releaseEntry.content"></span>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 'PUBLISHED'" class="gray"
            >已发布</span
          >
          <template v-else>
            <el-button
              v-permission="'wh:system:longVideoBath:edit'"
              type="text"
              @click="showDialog(scope.row)"
            >
              {{ scope.row.state === 'UNPUBLISHED' ? '显示详情' : '编辑' }}
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 编辑弹窗 -->
    <editDialog
      v-if="editDialogData.isShow"
      :dialog-data="editDialogData"
      @refresh="refresh"
    ></editDialog>
    <!-- 导入弹窗 -->
    <importDialog
      v-if="importDialogData.isShow"
      :dialog-data="importDialogData"
      @refresh="refresh"
      @showError="showError"
    ></importDialog>
    <!-- 导入失败弹窗 -->
    <errorDialog
      v-if="errorDialogData.isShow"
      :dialog-data="errorDialogData"
      from="longVideoBatch"
    ></errorDialog>
  </div>
</template>
<script>
import topSearch from '@component/longVidManagement/longVideoBatch/topSearch' // 上部搜索条件
import importDialog from '@common/importDialog' // 导入弹窗
import errorDialog from '@common/errorDialog' // 导入失败弹窗
import editDialog from '@component/longVidManagement/longVideoBatch/editDialog' // 编辑弹窗
import { getKeyValue } from '@/api/system/parameter' // 接口
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  getSearchList,
  downUrl,
  importUrl
} from '@/api/longVidManagement/videoBatch'
export default {
  name: 'manage',
  msg: '长视频批量维护管理-列表页',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    importDialog,
    editDialog,
    errorDialog
  },
  data() {
    return {
      loading: true,
      total: 0,
      // 搜索条件
      formInline: {
        vid: '', // 视频VID
        searchTitle: '', // 标题
        uploadUserId: '', // 上传视频人
        state: '', // 视频状态
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      // 表格数据
      tableData: [],
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 传递给编辑弹框的数据
      editDialogData: {
        isShow: false, // 控制弹框显示
        params: {}, // 参数
        contentLength: 0, // 内容长度
        titleLength: 0, // 标题长度
        id: '' // 参数
      },
      // 传递给导入弹框的数据
      importDialogData: {
        title: '发布长视频',
        isShow: false, // 控制弹框显示
        downUrl: '', // 控制弹框显示
        params: '' // 参数
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      },
      // 选择框选中的数据
      multipleSelection: [],
      powerStr: 'system:longVideoBath:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false // 是否显示当前页面
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    // 获取视频标题、视频内容长度
    this.getLength()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /*获取视频标题、视频内容长度*/
    getLength() {
      let objTitle = {
        configKey: 'movie_title_word_limit'
      }
      getKeyValue(
        objTitle,
        (response) => {
          this.editDialogData.titleLength = response
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
      let objContent = {
        configKey: 'movie_content_word_limit'
      }
      getKeyValue(
        objContent,
        (response) => {
          this.editDialogData.contentLength = response
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 获取列表 */
    searchList() {
      if (!this.canGetList) return
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      let params = obj
      getSearchList(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 编辑
    showDialog(item) {
      this.editDialogData.isShow = true // 显示编辑弹框
      this.editDialogData.id = item.preRelease ? item.preRelease.id : ''
      this.editDialogData.params = {
        vid: item.vid,
        title: item.title
      }
    },
    // 导入
    importBtn() {
      this.importDialogData.url = importUrl() // 导入接口
      this.importDialogData.downUrl = downUrl() // 下载模板接口
      this.importDialogData.isShow = true // 显示导入弹框
    },
    /* 导入失败弹窗 */
    showError(text) {
      this.errorDialogData.isShow = true // 显示导入失败弹框
      this.errorDialogData.warningText = text // 显示导入失败弹框
    },
    // 多个删除按钮
    deleteMult() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认要删除选中的${this.multipleSelection.length}条数据吗?`,
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let ids = []
        if (this.multipleSelection.length === 1) {
          ids[0] = this.multipleSelection[0].id
          this.delItem(ids)
        } else {
          this.multipleSelection.forEach((item) => {
            ids.push(item.id)
          })
          this.delMulRequest(ids)
        }
      })
    },
    // 单个删除按钮
    deleteOne(id) {
      this.$confirm('确定删除该条分享语管理信息吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delItem([id])
      })
    },
    /* 删除单个请求 */
    delItem(ids) {
      deleteSingleRequest(
        ids,
        (response) => {
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 删除多个请求
    delMulRequest(ids) {
      let params = { ids }
      deleteMultRequest(
        params,
        (response) => {
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* table选择 */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 编辑后，刷新列表 */
    refresh() {
      this.searchList()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#batchList {
  .gray {
    color: #666;
  }
  .table-conBtn {
    .el-dropdown {
      margin: 0 10px;
    }
  }
  .el-table {
    margin-top: 20px;
  }
  .oneLine {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
